class CSSandbox {
    constructor() {
        // 存储每个应用的 shadow root
        this.shadowRoots = new Map()
        // 基座应用的样式元素
        this.baseStyles = Array.from(document.getElementsByTagName('style'))
    }

    // 创建 Shadow DOM 容器
    createShadowContainer(appName, container) {
        // 如果容器已经有 shadow root，先移除它
        if (this.shadowRoots.has(appName)) {
            this.removeShadowContainer(appName)
        }

        // 创建一个新的容器元素
        const shadowContainer = document.createElement('div')
        shadowContainer.id = `${appName}-shadow-container`

        // 将原容器的内容移到新容器中
        Array.from(container.children).forEach(child => {
            shadowContainer.appendChild(child)
        })

        // 创建 shadow root，使用 closed 模式确保完全隔离
        const shadowRoot = shadowContainer.attachShadow({ mode: 'closed' })

        // 创建一个样式重置元素，确保子应用样式不受基座影响
        const resetStyle = document.createElement('style')
        resetStyle.textContent = `
            :host {
                all: initial;
                display: block;
            }
            :host * {
                all: unset;
            }
        `
        shadowRoot.appendChild(resetStyle)

        this.shadowRoots.set(appName, shadowRoot)

        // 将新容器添加到原容器中
        container.appendChild(shadowContainer)

        return shadowRoot
    }

    // 移除 Shadow DOM 容器
    removeShadowContainer(appName) {
        const shadowRoot = this.shadowRoots.get(appName)
        if (shadowRoot) {
            const container = shadowRoot.host
            container.remove()
            this.shadowRoots.delete(appName)
        }
    }

    // 处理样式隔离
    processCSS(appName, styles, container) {
        const shadowRoot = this.createShadowContainer(appName, container)
        
        // 创建样式元素
        const styleElement = document.createElement('style')
        
        // 处理样式内容，添加特定于应用的作用域
        const scopedStyles = this.scopeStyles(styles, appName)
        styleElement.textContent = scopedStyles
        
        // 将样式添加到 shadow root
        shadowRoot.appendChild(styleElement)
        
        return shadowRoot
    }

    // 为样式添加作用域
    scopeStyles(styles, appName) {
        return styles.replace(/([^}{]*){/g, (match) => {
            // 排除 @media, @keyframes 等规则
            if (match.includes('@')) {
                return match
            }
            // 为选择器添加 :host 前缀
            return `:host ${match}`
        })
    }

    // 获取应用的 shadow root
    getShadowRoot(appName) {
        return this.shadowRoots.get(appName)
    }
}

export default new CSSandbox() 